<template>
  <div class="header-page">
    <img class="img" src="../../assets/images/headerbg.png" alt="" />
    <div>
      <div>石洞口煤气制气安全管理信息化平台</div>
    </div>
    <button @click="logout" class="button"></button>
  </div>
  <div class="box">
    <div class="charts-header">
      <div class="item" v-for="(item, i) in tjList">
        <img class="icon" :src="frames[`IMG${i + 1}`]" />
        <div class="text" @click="handleClick">
          <div class="label">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="24"> </el-col>
      <el-col :span="6">
        <Card title="日历" height="350px">
          <el-calendar ref="calendar">
            <template #header="{ date }">
              <span>{{ date }}</span>
            </template>
          </el-calendar>
        </Card>
      </el-col>
      <el-col :span="18">
        <Card padding="12px" title="四色图" style="width: 100%" height="350px">
          <img
            @click="onSstClick"
            class="sisetu"
            src="../../assets/images/sisetu.jpg"
            alt=""
          />
        </Card>
      </el-col>
    </el-row>
    <el-row class="mt10" :gutter="10">
      <el-col :span="6">
        <Card title="待办事项" style="width: 100%" height="450px">
          <div class="current-work">
            <el-tabs v-model="activeTask" @tab-click="handleClick">
              <el-tab-pane
                :label="`${taskNum.task}丨待办`"
                name="task"
              ></el-tab-pane>
              <el-tab-pane
                :label="`${taskNum.remind}丨提醒`"
                name="remind"
              ></el-tab-pane>
              <div class="task" style="overflow: auto">
                <template v-if="showList.length">
                  <template v-if="activeTask == 'task'">
                    <div
                      class="task-item"
                      v-for="item of showList"
                      :key="item.id"
                      style="position: relative"
                    >
                      <div class="close" @click="taskReaded(item)">×</div>

                      <div class="task-item__left">
                        <div class="task-item__left-container">
                          <div class="task-item__title">
                            {{ item.titleName + "--" + item.titleType }}
                            {{ item.createTime }}
                          </div>
                          <div class="task-item__desc">
                            {{ item.titleInfo }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      class="task-item"
                      v-for="item of showList"
                      :key="item.id"
                      style="position: relative"
                    >
                      <div class="close" @click="remindReaded(item)">×</div>
                      <div class="task-item__left">
                        <div class="task-item__left-container">
                          <div class="task-item__title">
                            {{ item.remindType }}
                            {{ item.createTime }}
                          </div>
                          <div class="task-item__desc">
                            {{ item.remindContent }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </template>
                <template v-else>
                  <div class="task-empty">
                    <img src="../../assets/images/1670508650678.png" alt="" />
                  </div>
                </template>
              </div>
            </el-tabs>
          </div>
        </Card>
      </el-col>
      <el-col :span="18">
        <el-row :gutter="10">
          <el-col :span="12">
            <Card title="危险源统计" style="width: 100%" height="360px">
              <PercentageCircle ref="fxd"></PercentageCircle>
            </Card>
          </el-col>
          <el-col :span="12">
            <Card
              title="安全文化"
              style="width: 100%"
              height="360px"
              padding="20px"
            >
              <img
                class="widthf"
                src="../../assets/images/indexwh2.png"
                alt=""
              />
              <div class="aqwh">
                <div class="aqwh-title">安全目标</div>
                <div class="aqwh-content">
                  职工伤亡（含1至4级工伤）事故为零，火灾事故为零，有责泄漏、污染事故为零，有责设备、操作事故为零，有责行车事故为零，重大网络安全事件为零。控制不发生各类事故苗子、较大负面影响安全事件。
                </div>
              </div>
              <!-- <div class="aqwh">
                <div class="aqwh-title">安全目标</div>
                <div class="aqwh-content">
                  职工伤亡（含1至4级工伤）事故为零，火灾事故为零，有责泄漏、污染事故为零，有责设备、操作事故为零，有责行车事故为零，重大网络安全事件为零。控制不发生各类事故苗子、较大负面影响安全事件。
                </div>
              </div> -->
            </Card>
          </el-col>
        </el-row>
        <el-row class="mt10" :gutter="10">
          <el-col :span="24">
            <Card title="友情链接" style="width: 100%" height="80px">
              <div class="links">
                <div
                  class="links-item"
                  v-for="item in links"
                  @click="link(item.link)"
                >
                  <div class="imgBox">
                    <img class="img" :src="item.img" alt="" />
                  </div>
                  <!-- <p>{{ item.name }}</p> -->
                </div>
                <div class="links-item" @click="toRydw()">
                  <div class="">
                    <img class="img" height="40" :src="rydw" alt="" />
                  </div>
                  <!-- <p>{{ item.name }}</p> -->
                </div>
              </div>
            </Card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Card from "./components/Card.vue";
import PercentageCircle from "./components/NumDistributedPie.vue";
import {
  taskList as taskApi,
  remindList,
  updateRemind,
  fxCount,
  toCountQyKqZzSbRwYh,
  userLogin,
  updateTask,
} from "@/api/common.js";
import { useRouter } from "vue-router";
import nrcc from "@/assets/images/links/nrcc.jpg";
import qg from "@/assets/images/links/qg.png";
import sh from "@/assets/images/links/sh.jpg";
import sn from "@/assets/images/links/sn.jpg";
import rydw from "@/assets/images/links/rydw.png";
import useUserStore from "@/store/modules/user";
import { ElMessageBox } from "element-plus";
import IMG9 from "@/assets/images/Frame9.png";
import IMG1 from "@/assets/images/Frame1.png";
import IMG2 from "@/assets/images/Frame2.png";
import IMG3 from "@/assets/images/Frame3.png";
import IMG4 from "@/assets/images/Frame4.png";
import IMG5 from "@/assets/images/Frame5.png";
import IMG6 from "@/assets/images/Frame6.png";
import IMG7 from "@/assets/images/Frame7.png";
import IMG8 from "@/assets/images/Frame8.png";
const frames = {
  IMG1,
  IMG2,
  IMG3,
  IMG4,
  IMG5,
  IMG6,
  IMG7,
  IMG8,
  IMG9,
};
const userStore = useUserStore();

const userInfo = JSON.parse(localStorage.getItem("USER_INFO"));
const router = useRouter();
const onSstClick = () => {
  router.push({ name: "Sst" });
};
const activeTask = ref("task");
const taskNum = reactive({
  task: 0,
  remind: 0,
});
const taskList = ref({
  task: [],
  remind: [],
});
const fxd = ref();
const showList = computed(() => {
  return taskList.value[activeTask.value] || [];
});

const links = ref([
  {
    name: "危险化学品登记综合服务系统",
    link: "https://whpdj.mem.gov.cn/#/login",
    img: nrcc,
  },
  {
    name: "全国危险化学品安全生产风险监测预警系统",
    link: "http://whpyj.mem.gov.cn/login",
    img: qg,
  },
  {
    name: "上海市应急管理局统一办事入口",
    link: "http://app.yjglj.sh.gov.cn:8088/ajpt/login.html",
    img: sh,
  },
  {
    name: "申能集团安全生产标准化管理信息系统",
    link: "http://172.16.2.157:81/login.aspx",
    img: sn,
  },
]);

const link = (link) => {
  window.open(link);
};
onMounted(() => {
  taskApi({
    executorId: useUserStore().user.userId,
  }).then((res) => {
    taskNum.task = res.total;
    taskList.value.task = res.data || res.rows;
  });
  remindList({
    whetherRead: 1,
  }).then((res) => {
    taskNum.remind = res.total;
    taskList.value.remind = res.data || res.rows;
  });
  fxCount().then((res) => {
    fxd.value.setData(
      res.data.map((item) => ({
        value: item.count,
        name: item.dangerLevel,
      }))
    );
  });
  toCountQyKqZzSbRwYh().then((res) => {
    tjList.value = Object.keys(res.data).map((item) => {
      return {
        name: item,
        value: res.data[item],
      };
    });
  });
});
const remindReaded = (item) => {
  ElMessageBox.confirm("确认已读？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    updateRemind({
      ...item,
      whetherRead: 0,
    }).then(() => {
      remindList({
        whetherRead: 1,
      }).then((res) => {
        taskNum.remind = res.total;
        taskList.value.remind = res.data || res.rows;
      });
    });
  });
};
const taskReaded = (item) => {
  ElMessageBox.confirm("确认已读？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    updateTask({
      ...item,
      state: 1,
    }).then(() => {
      taskApi({
        executorId: useUserStore().user.userId,
      }).then((res) => {
        taskNum.task = res.total;
        taskList.value.task = res.data || res.rows;
      });
    });
  });
};
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}

const tjList = ref([]);

const toRydw = () => {
  userLogin().then((res) => {
    window.open("http://192.168.100.11/#/CurrentLocate?dsToken=" + res.msg);
  });
};
</script>

<style lang="scss">
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}

.container {
  position: relative;
  height: calc(100vh - 134px);
  background-color: #03293f;
  padding: 10px 20px;
}

.calendar {
  border-radius: 8px;
  ::v-deep .el-calendar-day {
    height: auto;
  }

  ::v-deep .el-calendar-table thead th {
    padding: 0 0 12px;
  }

  ::v-deep .el-calendar__body {
    padding: 12px 20px 20px;
  }
}

.current-work {
  // height: 470px;
  // padding: 16px;
  border-radius: 8px;
  background: #05405c;
  .el-tabs__item {
    color: #fff;
  }
  v-deep .el-tabs__header {
    margin: 0;
    padding: 0 16px;
    color: #fff;
  }

  v-deep .el-tabs__content {
    color: #fff;
    height: calc(100% - 40px);
  }

  ::v-deep .el-tab-pane {
    display: none;
  }

  .task {
    height: 300px;
    padding: 0 16px;
    overflow: auto;
    color: #fff;

    &-empty {
      margin-top: 120px;
      text-align: center;
    }

    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #eee;
      padding: 8px 0;

      &:first-child {
        border-top: 0 none;
      }

      &__left {
        flex: 1;
        width: 0;
      }

      &__right {
        margin-left: 16px;
      }

      &__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        margin-bottom: 2px;
      }

      &__desc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: #999;
      }
    }
  }
}

.el-calendar {
  --el-calendar-cell-width: 28px !important;
  background: #05405c;
  color: #fff;
  .current.is-selected {
    color: blue !important;
    background-color: #fff !important;
  }
  .el-calendar-table .el-calendar-day:hover {
    color: blue !important;

    background-color: #fff !important;
  }
}
.sisetu {
  height: 300px;
  width: 100%;
}
.widthf {
  width: 100%;
  // height: 182px;
}

.links {
  margin-top: 5px;
  display: flex;
  justify-content: flex-start;

  &-item {
    color: #fff;
    margin-left: 20px;
    .imgBox {
      width: 100px;
      height: 40px;
      img {
        width: 100px;
        height: 40px;
      }
    }
    // p {
    //   width: 200px;
    //   white-space: nowrap;
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    // }
  }
}

.aqwh {
  &-title {
    padding: 15px 0;
    color: #fff;
  }

  &-content {
    color: rgba($color: #ffffff, $alpha: 0.4);
    // text-indent: 2em;
  }
}

.header-page {
  height: 70px;
  padding: 0;
  margin: 0;
  background-color: #03293f;
  > div {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #03293f;
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    > div {
      z-index: 999;
      font-size: 24px;
      font-weight: 700;
      width: 500px;
      z-index: 999;
      background: linear-gradient(
        180deg,
        rgb(141, 224, 245) 0%,
        rgb(70, 161, 246) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }
  position: relative;
  .img {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .button {
    position: absolute;
    z-index: 999;
    width: 100px;
    height: 50px;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
}

.box {
  background-color: #03293f;
}
.charts-header {
  display: flex;
  background: #05405c;
  justify-content: space-around;
  margin: 0 20px;
  height: 64px;
  margin: 0 auto;
  align-items: center;
  .item {
    display: flex;
    .text {
      height: 30px;
      margin-left: 10px;
      padding-top: 8px;
      .label {
        color: #fff !important;
      }
      .value {
        margin-top: 4px;
        color: #fff !important;
      }
    }
  }
}

.close {
  position: absolute;
  top: 0;
  right: -15px;
  font-size: 30px;
  cursor: pointer;
  width: 30px;
  height: 30px;
}
</style>
